<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        div {
            margin: auto;
            width: 960px;
        }

        li {
            height: 380px;
            border: 1px solid #ccc;
        }
        /***打印样式 ***/

        @media print {
            hr {
                page-break-after: always;
            }
        }
    </style>
</head>

<body>
    <div>
        <input type="button" value="打印" id="btn">
        <ul id="ulbox">
            <li>文本1</li>
            <li style="height:400px;">文本2</li>
            <li>文本3</li>
            <li style="height:200px;">文本4</li>
            <li>文本5</li>
            <li>文本6</li>
            <li style="height:310px;">文本7</li>
            <li>文本8</li>
            <li>文本9</li>
            <li>文本10</li>
            <li>文本11</li>
            <li>文本12</li>
        </ul>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click", function () {
                console.log($("ul").outerHeight());
                var le = $("li").length;
                var hi = 0;
                var pa = 1;
                var $htm = $("<div id='new_dom'></div>");
                //$htm.appendTo("body");
                var list_html;
                for (var i = 0; i < le; i++) {
                    console.log($("li").eq(i).outerHeight())
                    hi = hi + $("li").eq(i).outerHeight();
                    $htm.append($("li").eq(i).clone(true));
                    console.log("old:",$("li").eq(i).text())
                    console.log("new:",$htm.html());
                    if(hi > 1100){
                        $htm.append('<p style="text-align:center;margin-top:'+(hi-1100) +'px;">第' + (pa)+'页</p><hr><li  class="titleli" style="height:50px;text-align:center;line-height:50px;font-size:26px;">表头</li>');
                        pa++;
                        le++;
                        hi = 0;
                    }
                }
                $htm.children("li.titleli:last-child").remove();
                var bdhtml=window.document.body.innerHTML;//获取当前页的html代码
                var new_html = $htm;
                $("body").empty().html($htm);
                window.print();
            })
        })
    </script>
</body>

</html>